<template>
	<div class="quill-wrap">
		<quill-editor class="own-editor ql-editor" v-model="own_content" ref="editor" :options="editorOption" @focus="onEditorFocus($event)"
		 @blur="onEditorBlur($event)" @change="onEditorChange($event)">
		</quill-editor>
	</div>
</template>

<script>
	import 'quill/dist/quill.snow.css'
	import {
		upFileUrl
	} from "@/api/others";
	import {
		getToken,
		getDoorToken
	} from '@/utils/auth'
	import {
		quillEditor,
		Quill
	} from 'vue-quill-editor'
	import {
		ImageExtend,
		QuillWatch
	} from '@/components/QuillImageExtendModuleOwn'
	import ImageResize from 'quill-image-resize-module' 
	Quill.register('modules/ImageExtend', ImageExtend);
	Quill.register('modules/imageResize', ImageResize);


	import {
		Message
	} from 'element-ui'
	export default {
		name: 'quill-editor-own',
		components: {
			quillEditor
		},
		props: {
			content: {
				type: String,
				default: ''
			},
			height: {
				type: Number,
				default: 300
			},
			readonly: {
				type: Boolean,
				default: false
			}
		},
		model: { // 定义model
			prop: 'content', // 绑定prop传递的值
			event: 'change' // 定义触发事件名称
		},
		data() {
			return {
				own_content: this.content || '',
				// 富文本框参数设置
				editorOption: {
					placeholder: '请在这里编辑显示文本',
					theme: 'snow', // 主题
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'],
								['blockquote', 'code-block'],
								[{
									'header': 1
								}, {
									'header': 2
								}],
								[{
									'list': 'ordered'
								}, {
									'list': 'bullet'
								}],
								[{
									'script': 'sub'
								}, {
									'script': 'super'
								}],
								[{
									'indent': '-1'
								}, {
									'indent': '+1'
								}],
								[{
									'direction': 'rtl'
								}],
								[{
									'size': ['small', false, 'large', 'huge']
								}],
								[{
									'header': [1, 2, 3, 4, 5, 6, false]
								}],
								[{
									'color': []
								}, {
									'background': []
								}],
								[{
									'font': []
								}],
								[{
									'align': []
								}],
								['clean'],
								['image']
							],
							handlers: {
								'image': function() {
									QuillWatch.emit(this.quill.id)
								}
							}
						},
						ImageExtend: {
							name: 'file',
							size: 1, // 单位为M, 1M = 1024KB
							action: upFileUrl,
							headers: (xhr) => {
								if (getToken()) {
									xhr.setRequestHeader('Authorization', getToken());
								}
								if (getDoorToken()) {
									xhr.setRequestHeader('DoorAuthorization', getDoorToken());
								}
							},
							response: (res) => {
								return res.data
							},
							sizeError: () => {
								Message.error('上传图片大小不能超过 1MB!');
							},
							error: () => {
								Message.error('图片上传失败!');
							}
						},
						imageResize: { // 放大缩小
							modules: ['Resize', 'DisplaySize']
						}
					}
				}
			}
		},
		watch: {
			content(val, oldVal) {
				this.own_content = val
			}
		},
		mounted() {
			this.$refs.editor.quill.on('text-change', () => {
				this.$emit('change', this.own_content)
			})
			
			this.$refs.editor.quill.container.style.height = `${this.height}px`
		},
		methods: {
			// 编辑器
			onEditorFocus(event) {
				if(this.readonly) event.enable(false)
			},
			onEditorBlur(event) {

			},
			onEditorChange({
				quill,
				html,
				text
			}) {
				// quill.deleteText(5000, 1)

			}
		}
	}
</script>

<style scoped>
	.own-editor /deep/ .ql-editor {
		line-height: normal;
		/* height: 300px; */
	}

	.own-editor /deep/ .ql-toolbar {
		line-height: initial;
	}
</style>
